<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStoreHook } from "@/store/modules/user";
import { logout } from "@/api/user/user";
import { QNURL } from "@/config/urlConfig";
import { useCommonStoreHook } from "@/store/modules/common";

const commonStore = useCommonStoreHook();

const userStore = useUserStoreHook();

const router = useRouter();

const isTeacher = computed(() => userStore.getRoles?.includes("teacher"));

const navList = [
  {
    name: "首页",
    path: "/home",
    icon: require("@/assets/images/home.png"),
    calback: () => {}
  },
  {
    name: "课程发现",
    path: "/courseFind",
    icon: require("@/assets/images/课程发现图标.png"),
    calback: () => {}
  },
  {
    name: isTeacher.value ? "课程管理" : "课程学习",
    path: "/course_manage",
    icon: require("@/assets/images/学习管理图标.png"),
    calback: () => {}
  },
  {
    name: "学习社区",
    path: "/community",
    icon: require("@/assets/images/学习社区图标.png"),
    calback: () => {}
  },
  // {
  //   name: "消息提醒",
  //   path: "",
  //   icon: require("@/assets/images/消息图标.png"),
  //   calback: () => {}
  // },
  {
    name: "答疑",
    path: "/chat",
    icon: require("@/assets/images/dy.png"),
    calback: () => {}
  }
];

let headerRef = ref();
let topDistance = ref(0);

// let loginVisible = ref(false);

// let formRef = ref();
function liClickHandel(item: any, index: number) {
  commonStore.SET_CURRENT_NAV_INDEX(index);
  item.calback();

  if (item.path) {
    router.push(item.path);
  }
}

function scrollAddEventHandle() {
  if (document.documentElement.scrollTop > 100) {
    topDistance.value = -80;
  } else {
    topDistance.value = 0;
  }
}

async function logoutFun() {
  await logout();
  userStore.LOGOUT();
  router.push("/login");
}

onMounted(() => {
  window.addEventListener("scroll", scrollAddEventHandle);
});

onBeforeUnmount(() => {
  window.removeEventListener("scroll", scrollAddEventHandle);
});
</script>

<template>
  <div class="head" ref="headerRef" :style="{ top: topDistance + 'px' }">
    <div class="head_box">
      <div class="image" @click="router.push('/')">
        <img src="@/assets/icons/logo1.png" />
      </div>
      <div class="righticon">
        <ul class="icon">
          <li
            v-for="(item, index) in navList"
            :key="index"
            @click="liClickHandel(item, index)"
            :class="[
              commonStore.getCurrentNavIndex === index ? 'li_active' : ''
            ]"
          >
            <img :src="item.icon" />
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <ul class="login">
          <!-- <li><span>注册</span></li>
          <li>|</li> -->
          <li v-if="!userStore.getToken" @click="router.push('/login')">
            <span>登录</span>
          </li>
          <el-dropdown v-else>
            <li class="avatar">
              <img :src="QNURL + userStore.getUserInfo?.avatar" alt="" />
            </li>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/my')"
                  >个人主页</el-dropdown-item
                >
                <el-dropdown-item @click="logoutFun">退出登入</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </ul>
      </div>
    </div>
    <!-- <Login v-model:loginVisible="loginVisible" /> -->
    <!-- <LiveStreamingStartForm /> -->
  </div>
</template>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  position: sticky;
  top: 0px;
  transition: all 1000ms;
  box-shadow: 0 0 1px 2px #eee;
  z-index: 999;

  .head_box {
    width: 1200px;
    height: inherit;
    display: flex;
    justify-content: space-between;
    margin: auto;

    .avatar {
      width: 50px;
      height: 50px;
      overflow: hidden;
      border-radius: 50%;
      box-shadow: 0px 0px 1px 2px #ccc;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.head img {
  width: 150px;
  height: auto;
  margin-top: 15px;
}
.righticon {
  display: flex; //使icon里的两块ul两端对齐
  // align-items: center;
  // transform: translateY(50%);
  // position: absolute;
  // top: 20px;
  // padding-top: 40px;
}
.righticon ul {
  // height: 85px;
  display: flex; //使icon里的两块ul两端对齐
  align-items: center;
}
.righticon ul li {
  list-style: none;
  margin-right: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;

  &:hover {
    color: #ff6633;
  }
}

.li_active {
  color: #ff6633;
}
.righticon ul li img {
  width: 20px;
  height: 20px;
  display: block;
  margin: auto auto;
  margin-bottom: 5px;
}
.righticon ul li span {
  // width: 80px;
  text-align: center;
}
.righticon .login li span {
  font-size: 20px;
}
</style>
